<template>
  <div>
    <el-dropdown class="version" @command="handleCommand">
      <el-button type="primary" class="history">
        版本历史<i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu class="project-dropdown" slot="dropdown">
        <el-dropdown-item v-for="version in versionList" :command="version.versionId" :disabled="version.versionId===showVersion">{{ version.versionName }}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <el-main
        id="evaluation-detail-box"
        v-loading="loading"
        element-loading-text="正在加载报告评价"
        element-loading-spinner="el-icon-loading">

      <el-button type="info"
                 plain
                 style="position: absolute; top: 30px; left: 50px"
                 @click="$router.push('/boss/mytasks/relation/' + $route.params.reportid)">
        <i class="el-icon-back" />&nbsp;返回报告关联
      </el-button>

      <BossEvaluationDialog></BossEvaluationDialog>

      <div class="title">
        <img src="../../../../assets/image/report-evaluation-title-red.png" alt="" style="width: 160px; margin: 10px 0 20px 0;">
      </div>

      <el-row class="content-area-outer-box" style="position: relative">
        <el-col class="content-area" :span="15">
          <el-main class="report-details-area" style="margin-bottom: 20px;">
            <div class="title">
              <img src="../../../../assets/image/report-details-red.png" alt="" style="width: 120px; margin-bottom: 10px;">
            </div>
            <report-detail-table
                class="report-detail-content"
                :report="form"
            ></report-detail-table>
            <el-descriptions
                :column="1"
                border>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-edit"></i>
                  系统评分
                </template>
                <span class="item-text">
                  {{this.systemRating}}
                </span>
              </el-descriptions-item>
            </el-descriptions>
          </el-main>
        </el-col>

        <report-comment-area
          :evaluation-data="evaluationData"
        ></report-comment-area>

      </el-row>
    </el-main>

  </div>
</template>

<script>
import {
  getHistoryVersionsOfReport,
  getReportByReportID,
  getReportEvaluationByReportID,
  getScreenshot,
  getRating
} from "@/api/report";

import BossEvaluationDialog from "@/components/boss/mytasks/report/BossEvaluationDialog";
import ReportDetailTable from "@/components/new/report-detail-table/ReportDetailTable";
import ReportCommentArea from "@/components/new/report-comment/report-comment-area/ReportCommentArea";

export default {
  name: "ReportEvaluationDetail",

  components: {
    ReportCommentArea,
    ReportDetailTable,
    BossEvaluationDialog
  },

  data() {
    return {
      versionList:[
        {
          versionId:1,
          versionName:'2001-20-23 18:00:00 提交版本',
        },
        {
          versionId:5,
          versionName:'2001-20-23 18:00:00 提交版本',
        },
        {
          versionId:7,
          versionName:'report evaluation detail',
        },
      ],
      showVersion:2,

      loading: true,  // v-loading 不能和 v-show 同时使用

      evaluationData: undefined,

      // 报告信息
      form: {
        id: -1,
        taskname: '',
        type: '',
        environment: '',
        description: '',
        steps: '',
        screenshot: 'https://lluviasnowb01.oss-cn-hangzhou.aliyuncs.com/collect/'
      },
      baseUrl: 'https://lluviasnowb01.oss-cn-hangzhou.aliyuncs.com/collect/',

      systemRating: 0
    }
  },



  created() {
    this.getEvaluationForm();
    this.getReport();
    this.loadHistoryVersion();
    this.loadSystemRating();
  },

  methods: {
    handleCommand(versionId){
      //todo 点击后，修改this.form的内容,this.showVersion
      //下行$message代码可删除
      this.$message('click on '+versionId);

      // todo lyl same code as 'src/components/worker/mytasks/finished/FinishedReportDetail.vue'
      // so the same checking process shall be made
      getReportByReportID(versionId).then(res=>{
        if (res.code !== 200) {
          return this.$message.error('报告不存在！');
        }

        const obj = res.data;
        for (let key of Object.keys(obj)) {
          if (key === 'type') {
            if (obj['type'] === 'function_test') this.form['type'] = '功能测试';
            else if (obj['type'] === 'performance_test') this.form['type'] = '性能测试';
            else if (obj['type'] === 'bug_explore') this.form['type'] = 'Bug探索';
          } else {
            this.form[key] = obj[key];
          }
        }

        getScreenshot(this.$route.params.reportid).then(res2 => {
          this.form["screenshot"] = this.baseUrl + res2[0].url;
        });
      })
      // 让对应版本不能点
      this.showVersion = versionId;
    },

    async getEvaluationForm() {
      this.evaluationData = await getReportEvaluationByReportID(this.$route.params.reportid, sessionStorage.getItem('userid'));
    },

    async getReport() {
      const reportid = this.$route.params.reportid;
      const res = await getReportByReportID(reportid);
      if (res.code !== 200) {
        return this.$message.error(res.msg);
      }

      const obj = res.data;
      const reportId = obj.id;

      // this.form["screenshot"]=this.baseUrl
      for (let key of Object.keys(obj)) {
        if(key==='id')
          sessionStorage.setItem('report_boss_evaluate_id',obj['id']);
        if (key === 'type') {
          if (obj['type'] === 'function_test') this.form['type'] = '功能测试';
          else if (obj['type'] === 'performance_test') this.form['type'] = '性能测试';
          else if (obj['type'] === 'bug_explore') this.form['type'] = 'Bug探索';
        } else {
          this.form[key] = obj[key];
        }
      }
      getScreenshot(reportId).then(res2 => {
        this.form["screenshot"] = this.baseUrl + res2[0].url
      });

      this.loading = false;
    },
    // lyl
    // todo lyl param name of the List
    loadHistoryVersion(){
      const latestReportId = this.$route.params.reportid;
      getHistoryVersionsOfReport(latestReportId).then(res=>{
        console.log(res.data);
        console.log(this.versionList);
        this.versionList = res.data.versionList;
      })
    },
    loadSystemRating(){
      const reportid = this.$route.params.reportid
      getRating(reportid).then(res =>{
        this.systemRating = res.data
      })
    }
  }
}
</script>

<style>

/* 用于调整表头宽度 */
.el-descriptions-item__label.is-bordered-label {
  width: 120px !important;
}

/* 用于初次评价时的星星大小 */
.leave-comment-vote span .el-rate__icon {
  font-size: 25px !important;
}

</style>

<style scoped>
.version{
  position: fixed;
  right:30px;
  margin-top:30px;
}
.project-dropdown{
  height:400px;
  overflow: auto;
}
.history{
  color: #fff;
  background-color: #AB0427;
  border-color: #AB0427;
}
.history:hover{
  color: #AB0427;
  background-color: #F1F1F1;
  border-color: #AB0427;
}

#evaluation-detail-box {
  position: relative;

  width: 80%;
  background: #fff;
  border-radius: 24px;
  box-shadow: rgba(90, 106, 140, 0.3) 0px 0px 6px;
  margin: 20px auto;
  padding: 40px 50px;
}

.report-detail-content {
  box-shadow: rgba(90, 106, 140, 0.3) 0px 0px 6px;
}

.content-area-outer-box,
.content-area,
.score-and-comments-area,
.score-area,
.comments-area,
.report-details-area {
  padding: 1% 1%;
  /*border: 1px solid #000;*/
}

.score-and-comments-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.score-area {
  max-height: 300px;
}

.score-content-area {
  min-height: 200px;
  max-height: 200px;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  column-gap: 20px;
}

.score-item {
  display: flex;
  flex-direction: row;
  column-gap: 5px;
  margin-bottom: 5px;
}

.score-content-area,
.comment-item
{
  border-radius: 12px;
  box-shadow: rgba(90, 106, 140, 0.3) 0px 0px 6px;
  background: #fffdfd;
}

.comments-area {
  max-height: 400px;
}

.comment-content-area {
  min-height: 200px;
  max-height: 400px;
  display: flex;
  flex-direction: column;
}

.comment-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 5px;
  padding: 20px 20px;
  margin-bottom: 15px;

  box-shadow: rgba(90, 106, 140, 0.3) 0px 0px 6px;
  border-radius: 12px;
}

.comment-item * {
  text-align: left;
}

.like-area {
  display: flex;
  flex-direction: row;
  align-items: center;

  margin-top: 10px;
}

.like-area img:hover {
  cursor: pointer;
}

.like-area .like-count {
  margin-left: 3px;
}

.author-like {
  font-size: 12px;
  background: #e0e0e0;
  color: #6F6F6F;
  padding: 2px 4px;
  margin-left: 10px;
}

.author-like:hover {
  cursor: default;
}

</style>
